<template>
    <div class="RxMyInfo">
        <div class="RxMyInfo-head">
            <image class="Rx-my-info-img" src="@/static/My-TOP.png"/>
            <div class="Rx-information-center">
                <div class="Rx-information">
                    <div class="Rx-sculpture">
                        <image slot="img" mode="aspectFill" :src="imageUrl(osUser.photo)" v-if="osUser.photo"/>
                        <image mode="aspectFill" v-else src="@/static/male.png"/>
                    </div>
                    <div class="Rx-sculpture-ri">
                        <span>{{ osUser.fullName }}</span>
                        <span class="user-email">{{ osUser.email }}</span>
<!--                        <span>{{i18n('happyDay','今天又是元气满满的一天~')}}</span>-->
                    </div>
                </div>
                <div class="Rx-group">
                    <div class="Rx-group-le">
                        <div class="Rx-group-span"><span>{{ osUser.deptName }}</span></div>
                        <div class="user-group">{{i18n('affiliation','所属部门')}}</div>
<!--                        <i class="iconfont icon-zuzhijiagou"></i>-->

                    </div>
                    <div class="Rx-group-le">
                        <div class="Rx-group-span"><span>{{ osUser.account }}</span></div>
                        <div class="user-group">{{i18n('account','账号')}}</div>
                        <!--                        <i class="iconfont icon-zuzhijiagou"></i>-->

                    </div>
                </div>
            </div>
        </div>
        <div class="Rx-center">
            <div class="Rx-center-list" @click="information">
                <image src="@/static/user-info.png" class="user-icon"/>
                <span>{{i18n('userInfo','个人信息')}}</span>
                <my-icon type="icon-jiantou_liebiaoxiangyou" class="arrow-style"></my-icon>
            </div>
            <div class="Rx-center-list" @click="editPassword">
<!--                <div style="background: #00BAAD" class="Rx-center-list-icon"><i class="iconfont icon-lock_fill1"></i>-->
<!--                </div>-->
                <image src="@/static/update-password.png" class="list-icon" />
                <span>{{i18n('setPwd','修改密码')}}</span>
                <my-icon type="icon-jiantou_liebiaoxiangyou" class="arrow-style"></my-icon>
            </div>
            <rx-picker :rangeList="i18nList" rangeKey="name" @change="change" v-if="isI18nLang=='YES'">
                <div class="Rx-center-list" style="border: none">
<!--                    <div style="background: #EB7557" class="Rx-center-list-icon"><i-->
<!--                        class="iconfont icon-yuyanqiehuan1"></i></div>-->
                    <image src="@/static/change-lang.png" class="list-icon"/>
                    <span>{{i18n('changeI18n','语言切换')}}</span>
                    <my-icon type="icon-jiantou_liebiaoxiangyou" class="arrow-style"></my-icon>
                </div>
            </rx-picker>
        </div>
        <button size="default" class="Rx-button" @click="loginOut">{{ i18n('logOut', '退出登录') }}</button>
    </div>
</template>

<script>
import MainLayoutApi from "@/api/MainLayout/MainLayoutApi";
import RxPicker from '@/components/RxPicker'
import TokenUtil from "../common/TokenUtil";

export default {
    name: "RxMyInfo",
    components: {
        RxPicker
    },
    data() {
        return {
            osUser: {},
            isI18nLang: this._vueAppIsLanguage,
            i18nList: [],
            i18nDefault: this._vueAppLanguage,
            i18nTitle: "中文",
        }
    },
    onLoad() {
        this.getMultiLinguals();

    },
    onShow(){
        this.getInit();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "loginUserLang", key);
        },
        //获取用户信息
        getInit() {
            MainLayoutApi.current().then(response => {
                if (response.success) {
                    this.osUser = response.data;
                    console.log(this.osUser)
                }
            })
        },
        //退出登录
        loginOut() {
            TokenUtil.removeToken();
            uni.reLaunch({
                url: '/pages/RxLogin/Login'
            });
        },
        //获取多语言配置列表
        async getMultiLinguals() {
            let self = this;
            this.i18nList = uni.getStorageSync("setI18nList");//获取多语言列表
            self.initI18n();
        },
        initI18n() {
            let language = uni.getStorageSync("language");
            if (!language) {
                this.setI18nType(this.i18nDefault);
                return;
            }
            this.setI18nType(language);
        },
        setI18nType(type) {
            this.i18nType = type;
            this.$i18n.locale = type;
            let obj = this.i18nList.find(row => {
                return type == row.type;
            });
            if (obj) {
                this.i18nTitle = obj.name;
            }
            uni.setStorageSync("language", type);
            uni.setNavigationBarTitle({
                title: this.i18nRouterName('pages/myInfo', '个人中心')
            });
            //
            uni.setTabBarItem({
                index: 0,
                text: this.i18nRouterName('pages/RxWorkbench', '工作台'),
                "pagePath": "pages/RxWorkbench"
            });
            uni.setTabBarItem({
                index: 1,
                text: this.i18nRouterName('pages/RxMyInfo', '我的'),
                "pagePath": "pages/RxMyInfo"
            });
        },
        change(obj) {
            this.setI18nType(obj.type);
        },
        //个人信息
        information() {
            uni.navigateTo({url: '/pages/RxMyInformation/RxInformation'})
        },
        //修改密码
        editPassword() {
            uni.navigateTo({url: '/pages/RxLogin/RxEditPassword'})
        }
    }
}
</script>

<style scoped>
.RxMyInfo-head {
    position: relative;
}

.Rx-information-center {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: -2.5rem;
}

.Rx-my-info-img {
    width: 100%;
    height: 12rem;
}

.Rx-information {
    display: flex;
    align-items: center;
}

.Rx-sculpture {
    width: 4.2rem;
    height: 4.2rem;
    border: 2px solid #fff;
    border-radius: 50%;
    overflow: hidden;
}

.Rx-sculpture image, .Rx-sculpture image {
    width: 100%;
    height: 100%;
}

.Rx-sculpture-ri {
    display: flex;
    flex-direction: column;
    color: white;
    margin-left: 0.5rem;

}

.Rx-sculpture-ri span:nth-child(1) {
    font-size: 32rpx;
    height: 2rem;
}
.user-email{
    font-size: 28rpx;
}
.Rx-group {
    background: white;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    padding: 20rpx;
    height: 100rpx;
    margin-top: 1rem;
}

.Rx-group-le {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.Rx-group-le:nth-child(1) {
    /*border-right: 1px solid #C9C9C9;*/
    height: 1.33rem;
}

.Rx-group-le i {
    color: #4285F2;
    font-size: 1.3rem;
    margin-right: 1rem;
}

.Rx-group-span {
    display: flex;
    flex-direction: column;
}

.Rx-group-span span:nth-child(1) {
    flex: 1;
    font-size: 1rem;
    color: #333333;
}
.Rx-center {
    margin: 120rpx 0 40rpx;
    background: #FFFFFF;
}

.Rx-center-list {
    display: flex;
    height: 3.5rem;
    align-items: center;
    border-bottom: 1px solid #EBECF0;
    padding: 0px 1rem;
}

.Rx-center-list-icon {
    width: 2.13rem;
    height: 2.13rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: #4285F2;
    margin-right: 1rem;
}

.Rx-center-list-icon i {
    font-size: 1.2rem;
}

.Rx-center-list span {
    flex: 1;
    font-size: 28rpx;
    color: #333333;
}

.Rx-button {
    background: #4285F2;
    width: calc(100% - 2rem);
    margin: 1rem;
    color: white;
}
.user-group{
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #7F7F7F;
}
.user-icon{
    width: 60rpx;
    height: 60rpx;
    margin-right: 12rpx;
}
.list-icon{
    height: 56rpx;
    width: 56rpx;
    margin-right: 16rpx;
}
.arrow-style{
    color: #ccc;
}
</style>
